import {QuestionInputPropsType} from "./interface";
import {Form, Input} from "antd";
import {useEffect} from "react";

export const PropComponent = (props: QuestionInputPropsType) => {
    const {title, placeholder, onChange,disable} = props
    const [form] = Form.useForm()
    useEffect(() => {
        form.setFieldsValue({title, placeholder})
    }, [title, placeholder]);

    function handleValueChange() {
        if (onChange) onChange(form.getFieldsValue())
    }

    return (
        <Form form={form} layout='vertical' initialValues={{title, placeholder}} onValuesChange={handleValueChange} disabled={disable}>
            <Form.Item label='标题' name='title' rules={[{required: true, message: '请输入标题'}]}>
                <Input/>
            </Form.Item>
            <Form.Item label='Placeholder' name='placeholder'>
                <Input/>
            </Form.Item>
        </Form>
    );
};